<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{$title}</title>
    <link rel="stylesheet" href="/admin/layui/css/layui.css">
    <link rel="stylesheet" href="/public/chat.css">
    <style>
        .chat-body{
            width: 700px;
            height: 600px;
            border-radius: 5px 5px 0 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -300px;
            margin-left: -350px;
            background: #FFFFFF;
            box-shadow: 5px 5px 15px #615e5e;
        }
    </style>
</head>
<body style="background: #e2e2e2;">
<div class="chat-body">
    <div class="chat-body-record">
        <div class="chat-body-item">
            <div class="item-img"><img src="{$adminInfo.thumb}"></div>
            <div class="item-body">
                <div class="item-body-title">{$adminInfo.nick_name}<span>{:date("Y-m-d H:i:s")}</span></div>
                <div class="item-body-main"><pre>您好我是别墅工场{$adminInfo.nick_name}，请问有什么可以帮您！</pre></div>
            </div>
        </div>
    </div>
    <div class="chat-speak">
        <textarea placeholder="请输入聊天信息..." name="content"></textarea>
        <div class="layui-btn-group chat-send">
            <button class="layui-btn layui-btn-sm send-msg">
                <i class="layui-icon layui-icon-release "></i> 发送
            </button>
        </div>
    </div>
</div>
</div>
<script src="/public/jquery-1.12.3.min.js"></script>
<script src="/admin/layui/layui.js"></script>
<script src="//new.stbieshu.com/static/verification.js"></script>
<script src="//new.stbieshu.com/static/socket.io.js"></script>
<script>
    var layer;

    //定义layer
    layui.use(['layer'], function(){
        layer = layui.layer;
    });

    var adminInfo = {$adminInfo|json_encode};
    var userInfo = {$userInfo|json_encode};
    // 连接服务端
    var socket = io('{$Think.config.msgDomain}:2120');

    // 连接后登录
    socket.on('connect', function(){
        socket.emit('loginServer', '{$uid|json_encode}');
    });

    //登录错误
    socket.on('login_error', function(msg){
        $(".chat-body-record").find(".chat-body-item").eq(0).remove();
        layer.alert(msg, {
            skin: 'layui-layer-lan'
            , closeBtn: 0
        });
    });

    //接受聊天消息
    socket.on('chat_room_msg', function(data){
        var temp = [];
        if(userInfo["uid"] == data.user_id){
            temp["img"] =  userInfo["thumb"];
            temp["name"] =  userInfo["name"];
            temp["class"] =  "chat-body-item-right";
        }else{
            temp["img"] =  adminInfo["thumb"];
            temp["name"] =  adminInfo["nick_name"];
            temp["class"] =  "";
        }
        var html =
            '<div class="chat-body-item '+ temp["class"] +'">' +
            '    <div class="item-img"><img src="'+temp["img"]+'"></div>' +
            '    <div class="item-body">' +
            '        <div class="item-body-title">'+temp["name"]+'<span>' + data.time + '</span></div>' +
            '        <div class="item-body-main"><pre>'+ data.content +'</pre></div>' +
            '</div>';
        $(".chat-body .chat-body-record").append(html);
        //滚动条滚动到底部
        $(".chat-body .chat-body-record").scrollTop($(".chat-body .chat-body-record")[0].scrollHeight);
    });

    //发送消息
    $(".send-msg").click(function () {
        var content = $("textarea[name=content]").val();//获取聊天内容
        if(!isNull(content) && $(this).find("i").is(".layui-icon-release")) {
            var sendThis = $(this);
            $(this).find("i").removeClass("layui-icon-release");
            $(this).find("i").addClass("layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop");
            $.ajax({
                type: "POST",
                url: "{:url('Msg/sendChatMsg')}",
                data: {content: content, room_id: "{$uid['map'][0]}", user_id: "{$uid.uid}"},
                success: function (data) {
                    if (parseInt(data.code) == 0) {
                        //清除发送内容
                        $("textarea[name=content]").val("");
                        sendThis.find("i").removeClass("layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop");
                        sendThis.find("i").addClass("layui-icon-release");
                    } else {
                        layer.alert('消息发送失败！', {
                            skin: 'layui-layer-lan'
                            , closeBtn: 0
                        });
                    }
                },
            });
        }
    });
</script>
</body>
</html>